<template>
  <!-- <el-table :data="socialUsers" :show-header="false">
    <el-table-column label="社交平台" align="left" width="120">
      <template v-slot="scope">
        <img style="height:20px;vertical-align: middle;" :src="scope.row.img" /> {{ scope.row.title }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="left" > -->
      <!-- <template v-slot="scope"> -->
        <!-- <div>
          <input v-model="QQCode">
          <el-button size="large" type="text" @click="unbind(scope.row)">&nbsp;修改</el-button>
        </div> -->
        <el-form ref="form" :model="user"  label-width="80px">
          <span style="color:red">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            注：两个群id之间用#号隔开
          </span>          
          <el-form-item  label="QQ群管理" prop="nickName">
            <el-input v-model="QQCode" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="submit">保存</el-button>
            <el-button type="danger" size="mini" @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      <!-- </template> -->
    <!-- </el-table-column>
  </el-table> -->
</template>
<script>

import {SystemUserSocialTypeEnum} from "@/utils/constants";
import {socialAuthRedirect} from "@/api/login";
import {getQQGroupDetilData, putQQGroupDetilData} from "@/api/baiduapi.js";

export default {
  props: {
    user: {
      type: Object
    },
    getUser: { // 刷新用户
      type: Function
    },
    setActiveTab: { // 设置激活的
      type: Function
    }
  },
  data() {
    return {
      QQCode:''
    };
  },
  computed: {
  },
  created() {
    getQQGroupDetilData().then(res=>{
      console.log('res',res)
      this.QQCode = res.data.groups
    })
  },
  methods: {
    submit(){
      let data = {"groups":this.QQCode}
      let asff = /^#?\d+(?:#?\d+)*$/;
      if (this.QQCode.length<=32) {
        putQQGroupDetilData(data).then(res=>{
          console.log('groups_res',res)
          if (res.data) {
            // this.$modal.msgSuccess("修改成功");
            this.open("修改成功")
          }else{
            // this.$message.error("修改失败");
            this.open("修改失败")
          }
        })
      }else {
        if (this.QQCode.includes('#')) {
          putQQGroupDetilData(data).then(res=>{
            console.log('groups_res',res)
            if (res.data) {
              // this.$modal.msgSuccess("修改成功");
              this.open("修改成功")
            }else{
              // this.$message.error("修改失败");
              this.open("修改失败")
            }
          })
        }else{
          // this.$message.error("输入内容为QQ群号，每个QQ群号用“#”隔开");
          this.open("输入内容为QQ群号，每个QQ群号用“#”隔开")
        }
      }
    },
    close() {
      this.$tab.closePage();
    },
    open(data) {
      const TIME_COUNT = 3;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0) {
            this.count -= 1;
            this.$forceUpdate()
          } else {
            clearInterval(this.timer);
            // 倒计时结束后执行的操作，例如跳转页面或显示内容
            this.timer = null
          }
          console.log("this.count", this.count);
          const notificationDOM = document.getElementsByClassName('test')
          document.getElementsByClassName('test')[notificationDOM.length-1].innerText =data+ " ("+this.count+"s)" 
          console.log(notificationDOM);
        }, 1000);
        let $notify = this.$notify({
        //   title: 'HTML 片段',
          dangerouslyUseHTMLString: true,
          duration: 3000,
          type: 'success',
          message:'<div><div style="float: right;margin-left: 0px;width: 230px;"><span class="test">'+data+'&nbsp;(3s)</span></div></div>'
        });
        console.log($notify);
      }
    },
  }
};
</script>
